<template>
  <div>
    <div style="margin-top: 15px">
      <div style="display: inline-block; width: 469px; margin-left: 123px">
        <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="国内">
              <el-checkbox-group v-model="searchRequest.type">
                <el-checkbox label="厦门" name="type"></el-checkbox>
                <el-checkbox label="北京" name="type"></el-checkbox>
                <el-checkbox label="香港" name="type"></el-checkbox>
                <el-checkbox label="三亚" name="type"></el-checkbox>
                <el-checkbox label="丽江" name="type"></el-checkbox>
                <el-checkbox label="成都" name="type"></el-checkbox>
                <el-checkbox label="上海" name="type"></el-checkbox>
                <el-checkbox label="武汉" name="type"></el-checkbox>
                <el-checkbox label="杭州" name="type"></el-checkbox>
                <el-checkbox label="深圳" name="type"></el-checkbox>
                <el-checkbox label="天津" name="type"></el-checkbox>
                <el-checkbox label="敦煌" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="国外">
              <el-checkbox-group v-model="searchRequest.type">
                <el-checkbox label="美国" name="type"></el-checkbox>
                <el-checkbox label="日本" name="type"></el-checkbox>
                <el-checkbox label="韩国" name="type"></el-checkbox>
                <el-checkbox label="新加坡" name="type"></el-checkbox>
                <el-checkbox label="印度" name="type"></el-checkbox>
                <el-checkbox label="法国" name="type"></el-checkbox>
                <el-checkbox label="英国" name="type"></el-checkbox>
                <el-checkbox label="澳大利亚" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="标签">
              <el-checkbox-group v-model="searchRequest.type">
                <el-checkbox label="前端" name="type"></el-checkbox>
                <el-checkbox label="后端" name="type"></el-checkbox>
                <el-checkbox label="黑客" name="type"></el-checkbox>
                <el-checkbox label="数据库安全" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <el-input style="width: 400px; margin-bottom: 33px; font-size: 18px"  placeholder="请输入文章名或者作者名" prefix-icon="el-icon-search"
                    v-model="searchRequest.name" clearable></el-input>

        </div>
      </div>

      <div style="display: inline-block; width: 700px; float: right; margin-right: 10%; height: 300px">
        <Carousel></Carousel>
      </div>
    </div>

    <div style="margin-top: 40px">
      <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                display: inline-block; float: left; margin-left: 10%; margin-top: 20px; width: 24%">
        <div style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);font-family: 楷体; font-size: 25px; margin-bottom: 15px;">向你推荐</div>
        <el-table
            :data="articleRank"
            style="width: 100%; "
            :row-class-name="tableRowClassName"
        >
          <el-table-column
              prop="top"
              label="排名"
              align="center"
              width="50px"
              >
          </el-table-column>
          <el-table-column
              prop="article_title"
              label="文章标题"
              width="130px"
              show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
              prop="user_name"
              label="文章作者"
              width="90px"
              show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
              prop="like_num"
              label="点赞量"
              align="center">
          </el-table-column>
          <el-table-column
              v-if="false"
              prop="id"
              label="">
          </el-table-column>
        </el-table>
      </div>
      <div style="display: inline-block; float: right; margin-right: 10%">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 active-text-color="#ff9d00"
                 disabled="true"
        >
          <el-menu-item style="font-size: 22px; margin-left: -53px">文章推荐</el-menu-item>
        </el-menu>
        <div style="border: 1px solid #CCCCCC; margin-left: -53px"></div>
        <div style="margin-top: 10px">
<!--          todo 文章假数据-->
          <ul>
            <li v-for="item in articles">
              <ArticleComponent :article="item" style="display:inline-block; width: 800px; margin-left: -50px"></ArticleComponent>
            </li>
          </ul>
        </div>
        <div style="margin-left: -53px; margin-top: -10px">
          <el-divider></el-divider>
        </div>
        <div style="margin-left: -53px; margin-top: -16px">
          <!--            如果数据已经全部展示完毕， 则显示没有更多数据了-->
          <div v-if="More">
            <el-button style="width: 100%; background-color: #FFF5E5" @click="getMoreArticle()">
              加载更多 <i class="el-icon-more"></i>
            </el-button>
          </div>
          <data v-if="!More">
            <el-button style="width: 100%; background-color: gainsboro" @click="getMoreArticle()">
              没有更多文章了 <i class="el-icon-more-outline"></i>
            </el-button>
          </data>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from "@/components/Common/Carousel";
import ArticleComponent from "@/components/Article/ArticleComponent";
export default {
  name: "ArticleHome",
  components:{
    ArticleComponent,
    Carousel
  },
  data(){
    return {
      searchRequest: {
        type: []
      },
      More: true,
      articleRank:[
        {
          top: 1,
          id: 111,
          article_title: "震惊这是第一长长长长长长长长长长长长",
          user_name: "YYF1号名字长长长长长长长长长",
          like_num: "12138"
        },
        {
          top: 2,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        },
        {
          top: 3,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        },
        {
          top: 4,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        },
        {
          top: 5,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        },
        {
          top: 6,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        },
        {
          top: 7,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        },
        {
          top: 8,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        },
        {
          top: 9,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        },
        {
          top: 10,
          id: 22,
          article_title: "震惊，这是第2",
          user_name: "YYF2号",
          like_num: "12038"
        }
      ],
      articles: [],
      num: 0
    }
  },
  methods: {
    // 请求分页接口，参数为 1.起始页数 2.每页大小 3.第几页
    // 点击加载更多时， 再发请求，合并article数组。
    getArticles: function (){
      this.articles = [
        {
          id: 123,
          title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
          coverImage: "https://p1-q.mafengwo.net/s19/M00/AA/AE/CoNHGWPwYIRhHU70AAegN6c766k.jpeg?imageMogr2%2Fstrip",
          avatar: "https://p.qqan.com/up/2021-6/16246735796128385.png",
          userName: this.nickName,
          content: "北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上，则芥为之舟；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力。故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。蜩与学鸠笑之曰：“我决起而飞，抢榆枋而止，时则不至，而控于地而已矣，奚以之九万里而南为？”适莽苍者，三餐而反，腹犹果然；适百里者，宿舂粮；适千里者，三月聚粮。之二虫又何知！小知不及大知，小年不及大年。奚以知其然也？朝菌不知晦朔，蟪蛄不知春秋，此小年也。楚之南有冥灵者，以五百岁为春，五百岁为秋；上古有大椿者，以八千岁为春，八千岁为秋。此大年也。而彭祖乃今以久特闻，众人匹之，不亦悲乎？\n" +
              "\n" +
              "2\n" +
              "汤之问棘也是已：“穷发之北，有冥海者，天池也。有鱼焉，其广数千里，未有知其修者，其名为鲲。有鸟焉，其名为鹏，背若泰山，翼若垂天之云；抟扶摇羊角而上者九万里，绝云气，负青天，然后图南，且适南冥也。斥鷃笑之曰：‘彼且奚适也？我腾跃而上，不过数仞而下，翱翔蓬蒿之间，此亦飞之至也。而彼且奚适也？’”此小大之辩也。\n" +
              "\n" +
              "3\n" +
              "故夫知效一官、行比一乡、德合一君、而征一国者，其自视也，亦若此矣。而宋荣子犹然笑之。且举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。彼其于世，未数数然也。虽然，犹有未树也。夫列子御风而行，泠然善也，旬有五日而后反。彼于致福者，未数数然也。此虽免乎行，犹有所待者也。若夫乘天地之正，而御六气之辩，以游无穷者，彼且恶乎待哉？故曰：至人无己，神人无功，圣人无名。",
          updateTime: "2023-2-24 14:30",
          likesNumber: 12138,
          tags: ["前端", "后端", "运维"]
        },
        {
          id: 123,
          title: "【南京】春日漫游记｜六朝金粉地 金陵帝王州",
          coverImage: "https://p1-q.mafengwo.net/s19/M00/26/0C/CoNJOmQJh0AW7iP6AAaxh7a6Fao.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          userName: "张扬很帅",
          content: "序：是南京！也是金陵！\n" +
              "2023年的第一场旅行，这也是疫情放开后的第一场旅行。旅行的目的地选择了 南京 ，这已经是第二次来 南京 了。\n" +
              "\n" +
              "在我的印象中， 南京 一直是一个浪漫的城市。可能是因为那一句“一句梧桐美，种满 南京 城。”，让我对 南京 念念不忘。\n" +
              "\n" +
              "南京 既受益又罹祸于其得天独厚的地理位置和气度不凡的风水佳境，过去曾多次遭受兵燹之灾，但亦屡屡从瓦砾荒烟中重整繁华。",
          updateTime: "2023-2-24 14:30",
          likesNumber: 12138,
          tags: ["前端"]
        },
        {
          id: 123,
          title: "春日拾光，自启东来，来一次江风海韵的自驾游",
          coverImage: "https://note.mafengwo.net/img/c8/2c/ed87feab1e3243d0a9cac81c5f17aebc.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          userName: "张扬很帅",
          content: "“江海明珠”启东\n" +
              "春天，是沉寂了整个冬季之后的苏醒。在这春暖花开的时节里，伴着和煦的光照，唤醒人们敏感的肌体与神经。又到了出行的日子，准备放慢脚步，感受春季的魅力，所以我选择了一次自驾周边游。\n" +
              "\n" +
              "说起 启东 可能很多人并不陌生， 江苏 省辖县级市， 南通 市代管，位于 江苏 省的东南端，长江入 海口 北岸，集黄金海岸与黄金水道于一身，江海岸线178千米，可利用深水海岸线30公里，中深水长江海岸线20公里 。南濒长江入 海口 北支，其 中东 段以江心为界，西段 永隆 沙与 上海 市崇明区接攘，崇启大桥与 上海 崇明岛相连；东、北濒临黄海，西与 海门 区毗邻。我对这里的印象更加深刻一些，在 南通 这座城市生活和工作了将近5年，所以对于 启东 一点都不陌生，可以说很多青春的记忆都留存在这座滨海历史文化名城。",
          updateTime: "2023-2-24 14:30",
          likesNumber: 12138,
          tags: []
        },
        {
          id: 123,
          title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
          coverImage: "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          userName: "张扬很帅",
          content: "      2020，清晰的记得也是春节🧨，\n" +
              "      即使雷神山已经开始动工，\n" +
              "      即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
              "      即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
              "      即使第一次机上如临大敌戴上N95😷...\n" +
              "      入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
              "      这一盘算，\n" +
              "      是整整三年，\n" +
              "      谁也没有想到，疫情会持续如此长的时间；\n" +
              "      谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
              "      谁也没有想到，我们的生活方式已经完全发生改变。",
          updateTime: "2023-2-24 14:30",
          likesNumber: 12138
        },
        {
          id: 123,
          title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
          coverImage: "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          userName: "张扬很帅",
          content: "      2020，清晰的记得也是春节🧨，\n" +
              "      即使雷神山已经开始动工，\n" +
              "      即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
              "      即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
              "      即使第一次机上如临大敌戴上N95😷...\n" +
              "      入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
              "      这一盘算，\n" +
              "      是整整三年，\n" +
              "      谁也没有想到，疫情会持续如此长的时间；\n" +
              "      谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
              "      谁也没有想到，我们的生活方式已经完全发生改变。",
          updateTime: "2023-2-24 14:30",
          likesNumber: 12138
        },
      ]
    },
    // 请求得到下一页数据，将数据与当前数组合并
    getMoreArticle: function () {
      this.num += 1
      if (this.num >= 2){
        this.More = false
      }else{
        var moreArticles = [
          {
            id: 123,
            title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
            coverImage: "https://p1-q.mafengwo.net/s19/M00/AA/AE/CoNHGWPwYIRhHU70AAegN6c766k.jpeg?imageMogr2%2Fstrip",
            avatar: "https://p.qqan.com/up/2021-6/16246735796128385.png",
            userName: this.nickName,
            content: "北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上，则芥为之舟；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力。故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。蜩与学鸠笑之曰：“我决起而飞，抢榆枋而止，时则不至，而控于地而已矣，奚以之九万里而南为？”适莽苍者，三餐而反，腹犹果然；适百里者，宿舂粮；适千里者，三月聚粮。之二虫又何知！小知不及大知，小年不及大年。奚以知其然也？朝菌不知晦朔，蟪蛄不知春秋，此小年也。楚之南有冥灵者，以五百岁为春，五百岁为秋；上古有大椿者，以八千岁为春，八千岁为秋。此大年也。而彭祖乃今以久特闻，众人匹之，不亦悲乎？\n" +
                "\n" +
                "2\n" +
                "汤之问棘也是已：“穷发之北，有冥海者，天池也。有鱼焉，其广数千里，未有知其修者，其名为鲲。有鸟焉，其名为鹏，背若泰山，翼若垂天之云；抟扶摇羊角而上者九万里，绝云气，负青天，然后图南，且适南冥也。斥鷃笑之曰：‘彼且奚适也？我腾跃而上，不过数仞而下，翱翔蓬蒿之间，此亦飞之至也。而彼且奚适也？’”此小大之辩也。\n" +
                "\n" +
                "3\n" +
                "故夫知效一官、行比一乡、德合一君、而征一国者，其自视也，亦若此矣。而宋荣子犹然笑之。且举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。彼其于世，未数数然也。虽然，犹有未树也。夫列子御风而行，泠然善也，旬有五日而后反。彼于致福者，未数数然也。此虽免乎行，犹有所待者也。若夫乘天地之正，而御六气之辩，以游无穷者，彼且恶乎待哉？故曰：至人无己，神人无功，圣人无名。",
            updateTime: "2023-2-24 14:30",
            likesNumber: 12138,
            tags: ["前端", "后端", "运维"]
          },
          {
            id: 123,
            title: "【南京】春日漫游记｜六朝金粉地 金陵帝王州",
            coverImage: "https://p1-q.mafengwo.net/s19/M00/26/0C/CoNJOmQJh0AW7iP6AAaxh7a6Fao.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
            avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
            userName: "张扬很帅",
            content: "序：是南京！也是金陵！\n" +
                "2023年的第一场旅行，这也是疫情放开后的第一场旅行。旅行的目的地选择了 南京 ，这已经是第二次来 南京 了。\n" +
                "\n" +
                "在我的印象中， 南京 一直是一个浪漫的城市。可能是因为那一句“一句梧桐美，种满 南京 城。”，让我对 南京 念念不忘。\n" +
                "\n" +
                "南京 既受益又罹祸于其得天独厚的地理位置和气度不凡的风水佳境，过去曾多次遭受兵燹之灾，但亦屡屡从瓦砾荒烟中重整繁华。",
            updateTime: "2023-2-24 14:30",
            likesNumber: 12138,
            tags: ["前端"]
          },
          {
            id: 123,
            title: "春日拾光，自启东来，来一次江风海韵的自驾游",
            coverImage: "https://note.mafengwo.net/img/c8/2c/ed87feab1e3243d0a9cac81c5f17aebc.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
            avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
            userName: "张扬很帅",
            content: "“江海明珠”启东\n" +
                "春天，是沉寂了整个冬季之后的苏醒。在这春暖花开的时节里，伴着和煦的光照，唤醒人们敏感的肌体与神经。又到了出行的日子，准备放慢脚步，感受春季的魅力，所以我选择了一次自驾周边游。\n" +
                "\n" +
                "说起 启东 可能很多人并不陌生， 江苏 省辖县级市， 南通 市代管，位于 江苏 省的东南端，长江入 海口 北岸，集黄金海岸与黄金水道于一身，江海岸线178千米，可利用深水海岸线30公里，中深水长江海岸线20公里 。南濒长江入 海口 北支，其 中东 段以江心为界，西段 永隆 沙与 上海 市崇明区接攘，崇启大桥与 上海 崇明岛相连；东、北濒临黄海，西与 海门 区毗邻。我对这里的印象更加深刻一些，在 南通 这座城市生活和工作了将近5年，所以对于 启东 一点都不陌生，可以说很多青春的记忆都留存在这座滨海历史文化名城。",
            updateTime: "2023-2-24 14:30",
            likesNumber: 12138,
            tags: []
          },
          {
            id: 123,
            title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
            coverImage: "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
            avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
            userName: "张扬很帅",
            content: "      2020，清晰的记得也是春节🧨，\n" +
                "      即使雷神山已经开始动工，\n" +
                "      即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
                "      即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
                "      即使第一次机上如临大敌戴上N95😷...\n" +
                "      入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
                "      这一盘算，\n" +
                "      是整整三年，\n" +
                "      谁也没有想到，疫情会持续如此长的时间；\n" +
                "      谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
                "      谁也没有想到，我们的生活方式已经完全发生改变。",
            updateTime: "2023-2-24 14:30",
            likesNumber: 12138
          },
        ]
        this.articles = this.articles.concat(moreArticles)
      }
    }
  },
  mounted() {
    console.log(this.articles)
    this.getArticles();
  }
}
</script>

<style scoped>
.el-form-item{
  margin-right: 35px;
}

.el-checkbox-group {
  text-align: left;
}


.el-checkbox {
  margin-left: 0px;
  margin-right: 25px;
  width: 60px;
  padding-left: 0px;
}
</style>